<template>
  <div>
    <div class="divcss5" style="border-bottom:3px solid #eee">
    <h5 align="left">职位信息管理>职位信息>修改职位信息</h5>
    </div>
  <el-form :model="jobInfoForm" :rules="rules" ref="jobInfoForm" label-width="100px" class="demo-jobInfoForm">
    <el-row type="flex" class="row-bg">
      <div style="font-size:12px;margin:0px 50px 20px ;width:550px;height:15px;float:left;background-color:rgba(0,255,255,0.1);">
        <div>您好！请在下面各输入框填写您要发布的职位的详细信息，请保证信息的完整性和有效性，谢谢!</div>
      </div>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-col :span="12">
        <el-form-item label="职位名称：" prop="name">
          <el-input placeholder="体现出职位的具体类型" style="width:16em" v-model="jobInfoForm.name"></el-input>
        </el-form-item>
      </el-col>
        <el-form-item label="职位HC：" prop="hc">
          <el-input placeholder="该职计划招聘人数" style="width:16em" type="jobHC" v-model.number="jobInfoForm.hc" autocomplete="off"></el-input>
       </el-form-item>
    </el-row>
    <el-row type="flex" class="row-bg" >
      <el-col :span="12">
      <el-form-item label="职业类型：" prop="type">
        <el-select v-model="jobInfoForm.type" placeholder="请选择职业类型">
        <el-option label="实习" value="0"></el-option>
        <el-option label="校招" value="1"></el-option>
        <el-option label="社招" value="2"></el-option>
      </el-select>
      </el-form-item>
      </el-col>
       <el-form-item label="是否急招：" prop="urgent">
        <el-select v-model="jobInfoForm.urgent" placeholder="请选择是否急招">
        <el-option label="是" value="0"></el-option>
        <el-option label="否" value="1"></el-option>
      </el-select>
      </el-form-item>
    </el-row>
    <el-row type="flex" class="row-bg" >
      <el-col :span="12">
        <el-form-item label="工作地点：" prop="location">
          <el-input  style="width:16em" v-model="jobInfoForm.location"></el-input>
          </el-form-item>
      </el-col>
        <el-form-item label="薪资" prop="salary" >
          <el-input style="width:16em" type="salary" v-model.number="jobInfoForm.salary" autocomplete="off"></el-input>
        </el-form-item>
    </el-row>
    <el-form-item label-width="100px" label="职位描述：" prop="duty"> 
      <el-input
        type="textarea"
        :rows="4"
        placeholder="包括工作职责与福利待遇等"
        v-model="jobInfoForm.duty">
      </el-input>
    </el-form-item>
    <el-form-item label="职位要求：" prop="req"> 
      <el-input
        type="textarea"
        :rows="4"
        placeholder="包括年龄、学历、技术或能力、工作经验等要求"
        v-model="jobInfoForm.req">
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="resetForm('jobInfoForm')">重置</el-button>
      <el-button type="primary" @click="submitForm('jobInfoForm')">提交</el-button>
    </el-form-item>
  </el-form> 
</div>
</template>

<script>
import fetch from '../api/fetch'  //导入接口
  export default {
    data() {
      return {
         jobInfoForm: {
          name: '',
          hc:'',
          type:'',
          urgent:'',
          location:'',
          salary:'',   
          duty:'',
          req:'',
        },
        rules: {
          name: [
            { required: true, message: '请输入职位名称'},
          ],
          hc: [
            { required: true, message: '请输入计划招聘人数'},
            { type: 'number',message: '人数必须为数字值'}
          ],
          type: [
            {required: true, message: '请选择职业类型' }
          ],
          urgent: [
            {required: true, message: '请选择是否急招' }
          ],
          location:[
            { required: true, message: '请输入工作地点'}
          ],
           salary: [
           { required: true, message: '薪资不能为空'},
           { type: 'number', message: '薪资必须为数字值'}
          ],
          duty: [
            { required: true, message: '请输入职位描述'}
          ],
         req: [
            { required: true, message: '请输入职位要求'}
          ]
        }
      }
    },
    mounted(){//调用方法
      this.getJobDetail(100601)
      this.addAnimation()
    },
    methods: {
      getJobDetail(jid) {
      fetch.getJobDetail(jid).then(res =>{
        console.log(res)
        this.jobInfoForm=res.data//调用后端数据，使当前表“jobInfoForm”数据换为传回的数据，格式为“this.hobInfoForm="res"+".data"+".postman传回的表头，这里为空"
        if(this.jobInfoForm.urgent==0){this.jobInfoForm.urgent='是'}//数字转文字
        if(this.jobInfoForm.urgent==1){this.jobInfoForm.urgent='否'}
        if(this.jobInfoForm.type==0){this.jobInfoForm.type='实习'}
        if(this.jobInfoForm.type==1){this.jobInfoForm.type='校招'}
        if(this.jobInfoForm.type==2){this.jobInfoForm.type='社招'}
      })
    },
      addAnimation() {
      let form = document.getElementsByClassName('jobInfoForm')[0]
      form.classList.add('animated')
      form.classList.add('bounceInDown')
    },
      submitForm(formName) {
        if(this.jobInfoForm.urgent=="是"){this.jobInfoForm.urgent='0'}
        if(this.jobInfoForm.urgent=="否"){this.jobInfoForm.urgent='1'}
        if(this.jobInfoForm.type=='实习'){this.jobInfoForm.type=0}
        if(this.jobInfoForm.type=='校招'){this.jobInfoForm.type=1}
        if(this.jobInfoForm.type=='社招'){this.jobInfoForm.type=2}
        let result={
          jid:100601,
          name:this.jobInfoForm.name,
          hc:this.jobInfoForm.hc,
          type:this.jobInfoForm.type,
          urgent:this.jobInfoForm.urgent,
          location:this.jobInfoForm.location,
          salary:this.jobInfoForm.salary,
          desc:this.jobInfoForm.desc,
          req:this.jobInfoForm.req
        }
         this.$confirm('确定提交该职位信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.$refs[formName].validate((valid) => {
          if (valid) {
           fetch
          .jobEdit(result)
          .then(res => {
            console.log(res)     
          if (res.data.code ===200) {
          this.$alert('职位信息已成功提交，请等待管理员审核', '提示',{
            confirmButtonText: '确定',
            callback: action => {
           this.$message({
            type: 'success',
            message:'提交成功'
          });
          }
          });
          } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning"
                  });
                } 
            })
            .catch(e => {
              this.$message({
                message: "提交失败",
                type: "warning"
              });
            });
          } else {
          this.$alert('表单填写不完整请检查', '提示',{
          confirmButtonText: '确定',
          callback: action => {
          this.$message({
          type: 'info',
          message:'提交失败'
          });
          }
        });
            return false;
          }
        });
      })},
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
} 
</script>
<style>
.divcss5{
   margin:20px 0;
   color: rgb(144,144,144);
   height: 30px;
   }
</style>